<template>
  <div class="swiper" ref="wrapper"
    :style="{ width: width }">
    <div class="swiper-content" ref="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  name: 'my-swiper',
  props: {
    width: { type: String, default: '400px' },
    spaceBetween: { type: Number, default: 0 }
  },
  mounted () {
    this.$nextTick(_ => {
      // this.setSwiperWidth()
      this.$refs.content.style.width = '4000px'
      this.initSwiper()
    })
  },
  methods: {
    setSwiperWidth () {
      this.children = this.$refs.content.children
      let width = 0
      const swiperWidth = this.$refs.wrapper.clientWidth
      for (let i = 0; i < this.children.length; i++) {
        const child = this.children[i]
        child.style.width = swiperWidth + 'px'
        width += swiperWidth
      }
      this.$refs.content.style.width = width + 'px'
    },
    initSwiper () {
      this.slider = new BScroll(this.$refs.wrapper, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        },
        click: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper {

  &-content {

  }
}
</style>
